Open Live Writer で Blogger に投稿できない（Error 400 Bad Request）

Open Live Writer でブログを書いていますが、今年になってから「Can't publish files The remote server returned an error: (400) Bad Request.」とエラーが表示され、Google Blogger に投稿できなくなってしまいました。

色々とググってみると、Error 400 - The Remote server returned an error · Issue #786 に、2019年1月16日から写真があると Google Blogger に投稿できなくなったとあります。

何か解決方法はないかと探して見つけたのが、下記のTweetでした。

If you're having trouble posting photos to Google Blogger with @OpenLiveWriter, we have a test build with a fix. We'd appreciate it if you can test and let us know if it's working for you. https://t.co/oVOz9h3UmF

— Open Live Writer (@OpenLiveWriter) January 20, 2019

リンクにあるテスト版を試してみましたが、問題なく OpenLiveWriter で Google Blogger にブログを投稿することができました。 感謝、陳謝です。

Open Live Writer 0.6.3 のインストール

最新版の Open Live Writer のバージョンは、0.6.2 ですが、OpenLiveWriter 0.6.2.314 - AppVeyor から Releases\OpenLiveWriterSetup.exe をダウンロードして、実行します。

C:\Users\[ユーザ名]\AppData\Local\OpenLiveWriter に0.6.3 がインストールされます。

バージョンを確認すると 0.6.3 になっています。

OpenLiveWriter0.6.3 の不具合

OpenLiveWriter 0.6.3 を実行すると、10秒毎にゾンビのごとくOpenLiveWriter が次々と起動し続けます。

この対処方法についても、上記のTweetのスレッドにリンクがあり、Update.exe を削除するとすればよいとありました。

Update.exe を削除

Update.exe は、OpenLiveWriter 0.6.3 がインストールされた C:\Users\[ユーザ名]\AppData\Local\OpenLiveWriter にあります。

Update.exeを削除すればゾンビが生まれなくなります。ただ、起動時に最新版をのアップデートチェックがされなくなるかもしれませんので、最新版は自身でチェックする必要があるかもしれません。

Googleが提供するツールでモバイルのエクスペリエンスを向上させる

約半数がモバイルからのアクセス

スマホの普及によりモバイルからのアクセスは増加しています。このブログへのアクセス（UUベース）も2013年1月には10％に満たなかったモバイルユーザーが、2014年下期には45％と、半数近くがモバイルからのアクセスとなっています。

ブログのモバイル対応について考えてみた | 象と散歩 でモバイル（スマホ）でYoutubeと表を見やすくするための方法について記載しましたが、今やスマホで見やすいサイトであることは必須条件となってきています。

Googleではモバイルに対するユーザビリティに関してのレポートやツールを提供していますので、これらを有効活用してモバイル・ユーザーフレンドなサイトにしましょう。

モバイル対応を求めるGoogle

Googleはモバイルに対応したサイトを望んでいます。 下記はモバイル・ファーストインデックスの動画です。日本語字幕で見られます。

Google にとっては、モバイル フレンドリーなサイトが増えることが、結果、モバイルでの検索の増加、広告収入の増加に繋がるので当然ですが、利用者にとってもモバイル ユーザフレンドなサイトが望まれているのは利用者の立場からみて間違いありません。

[スマホ対応] ラベルって何？

2014年11月14日付のGoogleウェブマスター向け公式ブログの 検索ユーザーがモバイル フレンドリー ページを見つけやすくするために の中でモバイル版の検索結果に［スマホ対応］ラベルが表示されるという発表がありました。［スマホ対応］ラベルは下記の条件に合致する場合に適用されるとあります。

• 携帯端末では一般的でないソフトウェア（Flash など）を使用していないこと
• ズームしなくても判読できるテキストを使用していること
• ユーザーが横にスクロールしたりズームしたりする必要がないよう、コンテンツのサイズが画面のサイズと一致していること
• 目的のリンクを簡単にタップできるよう、それぞれのリンクが十分に離れた状態で配置されていること

【引用】検索ユーザーがモバイル フレンドリー ページを見つけやすくするために

日本語（左図）では[スマホ対応]、英語（右図）は[Mobile-friendly]と表示されます。

そして、「Googleではモバイル・フレンドリーの条件をランキング要素として使用することも実験中です。」という記載がありますので、近い将来には、”見やすさ” だけではなく、検索結果のランキングに影響しそうです。

モバイル対応を始めよう

Googleでは、サイトやブログのモバイル対応のガイダンスとして、 ウェブマスター向けモバイルガイド を提供してくれています。

モバイル フレンドリー テスト

この中にサイトやブログがモバイルに最適化されているかを確認するために モバイル フレンドリー テスト が用意されています。自分のサイトやブログをGoogleがモバイルに最適化されていると判断しているかを確認しましょう。

確認は簡単で、下記画面でURLを入力して「分析実行」ボタンをクリックするだけです。

問題がなければ下記のように「問題ありません。このページはモバイル フレンドリーです。」と表示されます。またGoogleがこのサイトを実際にどのように見ているのかがイメージとして表示されます。

このモバイル フレンドリー テストでお墨付きがもらえれば、前述したGoogleモバイル検索の結果で、[スマホ対応]ラベルが付加されます。

PageSpeed Insights でモバイルの操作性を向上させる

モバイル フレンドリー テスト で問題がなかったとしても、まだ改善できることは見つけられます。そのひとつが、PageSpeed Insights です。

PageSpeed Insights は、ページのパフォーマンス（表示速度）を測定し、改善点を指摘してくれるツールですが、PCとモバイルと両方の表示で測定を行ってくれます。（Google ウェブマスター向け公式ブログ: PageSpeed Insights を使ってサイトのモバイル操作性を向上させましょう）

1) PageSpeed Insights の実行

「ウェブページのURLを入力」欄にURLを入力して「分析」をクリックします。

2）PageSpeed Insights の実行結果

ブログのモバイル対応について考えてみた | 象と散歩 でチェックしてみましたが、58/100 点と思ったより点数が高くなりません。

改善できる点はないかと詳細を確認すると、「次のスクリプトの非同期バージョンを使用してください」という中に Google +1 のスクリプトが含まれていましたのでこちらを改善します。

Google +1のJavaScripitを非同期にする

Google +１のJavaScripitを非同期にする方法については、+1 ボタン - Google+ Platform の JavaScript の非同期読み込みに記載がありますので こちら を参考にしてください。

ヒント: パフォーマンスを最高にするには、このコードを最後の +1 タグの直後に配置します。

とありますが、</Body>タグの直前に記載すれば大丈夫です。

3) 修正後の再チェック

Google +1のJavaScriptを変更して再度、PageSpeed Insights で確認すると、58/100 → 60/100 へと2ポイント改善されました。

PageSpeed Insights のルール に日本語での解説もありますが、Bloggerを利用している場合には、これ以上の改善はできなそうです。

４）ユーザーエクスペリエンス

PageSpeed Insightsでは「速度」以外にも「ユーザーエクスペリエンス」についても評価してくれます。こちらは 96/100 で修正が必要な項目はありませんでした。

ウェブマスターツール

Googleウェブマスターツールでもモバイル ユーザビリティのチェックができます。チェックできる内容は以下の６点です。

• Flash が使用されています
• ビューポートが設定されていません
• 固定幅のビューポート
• コンテンツのサイズがビューポートに対応していません
• フォントサイズが小です
• タップ要素同士が近すぎます

詳細は、モバイル ユーザビリティ - ウェブマスター ツール ヘルプ で確認できます。

まとめ

Googleが強く推奨するだけではなく、モバイルからのアクセスは増え続けていますので、モバイル ユーザ体験の向上は今や必須です。

スマホで検索して、開いた途端に見る気が失せるサイトもまだ少なくありません。折角、Googleが無償でモバイル ユーザビリティ、表示速度など各種チェックツールと変更方法まで教えてくれているので、是非、修正可能な範囲で対応しましょう。

【おまけ】モバイル・ユーザの実態調査（Our Mobile Planet)

Googleが提供するモバイル向けのレポートとして、各国のモバイルユーザの実態をまとめた Our Mobile Planet があります。2013年のレポートなので鮮度は落ちてしまいましたが、モバイルユーザーの動向としては参考になります。

自分でグラフも作れる Our Mobile Planet

また Our Mobile Planet では、2011～2013年のデータを使って自分で簡単なグラフを作成することができます。

例えば、下記はスマホでどのくらいの頻度でウェブにアクセスをしているかを示したグラフで、83％のスマホ・ユーザーが毎日ウェブサイトにアクセスしていることがわかります。

各国との違いも比較できるので、2014年のデータも追加されることを願います。

検索エンジンでブログを検索対象とする方法

久しくGoogleウェブマスターツールを覗いてみていなかったのですが、いつのまにか自分が使っている Blogger もサイトマップに対応していたので、Googleウェブマスターツールで登録を変更しました。

ウェブマスターツールでGoogleに検索をしてもらうようにするための方法は、BloggerでなくてもどのWEBサイトでもブログでも同じです。

Google検索の仕組み

Googleでは、スパイダー（クローラー）というソフトウェア（ロボット）が定期的にWEBページをクローリングして情報を収集してインデックスを作成しています。Googlebot がこのクローリングを行うためのロボットで、ボットとはロボットの略称です。

英語のクロール（CRAWL）という意味には、虫が這い回るという意味もあるので、まさにリンクをたどって這い回る蜘蛛（スパイダー）がクローリングなのです。



そして、誰かがGoogleで検索したときに、索引として参照されるのがこのインデックスです。逆に言えばインデックスに登録されていないWEBページは検索の対象になりません。

Goolgeの検索の仕組みついては、Googleが提供している「How Search Works」（日本語字幕あり）が、わかりすく説明をしているので参考にしてください。

クローラーの挙動を決める robot.txt

robots.txt ファイルについて - ウェブマスター ツール ヘルプ に説明がありますが、robots.txt には、クローラーが、サイトやブログにアクセスしたときにどのように振る舞ってもらいたいかが記載されています。最もシンプルなのは、クローリングを許可するか否かと、サイト構成（地図）が記載されているサイトマップの設置場所についての記載です。

robots.txtの表記例

項目名	説明
User-agent:	対象となるロボット名です。 * はすべてのロボットを対象にしているという意味になります。
Disallow:	クローリング対象外とするURLを記載します。
Allow:	クローリングの対象とするURLを記載します。 / はディレクトリ配下すべてを対象とするという意味になります。
Sitemap:	サイトマップが設置されているURLを指定します。

Blogger の robots.txt

Blogger の場合、何も設定しなくても下記の robots.txt がルートディレクトリに作成されています。自分のブログであれば、http://walking-elephant.blogspot.com/robots.txt です。独自に編集することもできます。

User-agent: Mediapartners-Google
Disallow: 

User-agent: *
Disallow: /search
Allow: /

Sitemap: http://walking-elephant.blogspot.com/sitemap.xml

User-agent: が Mediapartners-Google となっているのは Google AdSense です。Disallow: の指定がないので、すべてのディレクトリが対象となります。一方、通常の検索エンジンに対しては、/search をクローリング対象外としているので検索結果やラベル検索によるページについてはインデックスされませんが、広告は表示されるという設定になっています。

サイトマップとは

Googleなどの検索エンジンのクローラーは、リンクをたどってコンテンツの情報を取得していきます。サイトマップはその道しるべ（索引）です。サイトマップには、コンテンツの場所（URL）や最終更新日などが書かれています。

Blogger は、サイトマップに対応していなかったので、サイトマップ代わりにRSS/ATOMフィードを使わなければなりませんでしたが、いつのまにかサイトマップに対応して自動的に作成されるようになっていました。

下記は、自分のブログのサイトマップの例ですが、<URL>タグで1コンテンツを囲み、<loc>タグで場所（URL）と<lastmod>タグで最終更新日が記述されています。

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>http://walking-elephant.blogspot.com/2014/12/2kg.html</loc>
    <lastmod>2014-12-23T16:30:27Z</lastmod>
  </url>
</urlset> 

sitemap.xmlの表記例

項目名	説明
<url>	<url>タグで1コンテンツを囲みます。 <url>~</url>の間に以下のタグでコンテンツの詳細を記載します
<loc>	【必須】 ページの場所（URL）を記載します
<lastmod	【オプション】 ページの最終更新日を記載します
<changefreq>	【オプション】 ページの更新頻度ですが参考値です（always,hourly,daily,weekly,monthly,yearly,never）
<priority>	【オプション】 サイト内の重要なページを知らせるための優先度（0.0-1.0） デフォルトの優先度は0.5です

ウェブマスターツールに登録しよう

Googleなどの検索エンジンは、下記の順番でサイトやブログのリンクをたどってインデックスに登録していきます。



しかし、世界中には数多のサイトやブログがありますので、自分のサイトやブログをクローリングしてもらうために、ウェブマスターツールに登録しておきましょう。Yahoo! の検索エンジンはGoogleなので、現在、WEBマスターツールを提供しているのは、GoogleとBingです。

・Goolge	ウェブマスターツール
・Bing	Webmaster Tools

Googleウェブマスターツールにサイトマップを登録しよう

Googleウェブマスターツールでのサイトマップの登録方法は下記の通りです。

① メニューからクロールの下にあるサイトマップを選択

② 「サイトマップの追加テスト」をクリック

③ ボックスにsitemap.xmlをタイプ

④ 「サイトマップをテスト」をクリック



⑤ テスト完了でエラーがないことを確認



⑥ ①-③と同じ手順で「サイトマップを送信」をクリック

新しく登録されたサイトマップでインデックスに登録されるまでステータスは保留となっています。



⑦ インデックスに登録されたら、以前に登録したRSS/ATOMフィードを削除

RSS/ATOMフィードでインデックスを登録していたときは、214登録／215送信でしたがXMLサイトマップに変更したら213登録／213送信と正しい213ページになりました。

Bing Webマスターにサイトマップを登録しよう

続いてBingのWebマスターツールへのサイトマップの登録です。サイトマップの送信ボックスにXMLサイトマップのURLを入力して送信ボタンをクリックすれば完了です。



以上でサイトマップの登録は完了です。

Word2013でブログを書く

やっとBloggerユーザーもWord2013でブログを投稿できるようになりました。Word2007からブログ投稿ができるようになっていたのですが、Word2013では、Bloggerのアカウントを選択すると「アカウントを登録することができません。」と悲しくも拒絶されていたのです。


もちろんWindowsマシンであればMicrosoftが提供する Windows Essentials に含まれている優れたブログライターである Windows Live Writer を利用することできるので、敢えてWordでブログを投稿する必要はないのですが、Surface/Surface 2 に搭載されている Windows RTではWindows Live Writerが利用できません。またWindowsストアにブログ・ライティング・ソフトはないので、Surface使いにはWordでブログの投稿できないというのは致命的？でした。

Surface2 32GBモデル (シルバー)

Word2013でBloggeの投稿が可能に

12月に修正プログラムがリリースされてやっとWord2013からBloggerに投稿できるようになりました。

Description of the Word 2013 update 2850060: December 10, 2013

  Issue that this update fixes （このアップデートで修正される問題）

You cannot register your Blogger account in Word 2013.
（Word2013でBloggerアカウントを登録できない）

さっそく試してみると、通常のWord2013でも Office RT のWord2013 でも Blogger アカウントの登録ができました。
 

Wordでブログに投稿する

Word2013でブログに投稿するの簡単です。Wordを起動して「ブログの投稿」を選択します。

 
後は前述のアカウント登録をすれば準備完了です。Wordと同じように文章を作成できるので難しいことがわからなくてもブログに投稿することができます。WordPress.com にも対応しています。

Wordでブログのメリット

• ワープロ感覚でブログを作成
• 図形、クリップアートなどの利用が可能
• 表、グラフも簡単に作成

基本的な操作はワードと同じなので気軽にブログを作成することができます。表の作成、図の作成、グラフの作成なども容易です。例えば下記のようなブログを簡単に作成することができます。

 

Wordでブログのデメリット

• プレビューができない
• ビデオ、地図などが挿入できない
• htmlが直接編集できない
• 余分なHTMLタグ <span xlmns=’’’’></span>

プレビュー機能がないのでブログ上でどのように表示されるのかを確認するためにはブログに下書き保存をして確認するしかありません。またWordではYoutubeの動画を差し込むことができるのですが、ブログテンプレートからは動画の挿入ができません。あと地図の挿入もできません。何よりもhtmlを直接編集できません。またフォントを指定していなくても余分なhtmlタグが挿入されてしまいます。

Wordでブログ投稿をするコツ

前述したようにWindowsマシンであれば、Windows Live Writerを利用した方が無難です。しかし普段はSurface2を持ち歩いているのでブログの下書きとしてwordを利用しています。ブログに直接投稿する以外にも下書きとして保存できるので修正が必要であれば、ブラウザや別な環境で修正を行うことができます。 下書きとしてだけではなく、図形やグラフを挿入するような場合にもwordで作成すると便利です。

残念なことに...

2014年1月の初旬にはまた Word 2013 から Blogger にアクセスできなくなりました。僅か１ヵ月足らずの命とは...。マイクロソフトのコミュニティには、「ログインのシーケンスが Googleによって変更されたのでは？」とありますが、そもそも Windows Live Writer では Blogger に接続して使えるのですからそんなに難しい問題ではないのではと思ってしまいます。

早いバグフィックスを望みます。

そして再び...

2014年4月8日のWord2013のアップデートに下記の更新内容が含まれていました。

Word 2013 で、Blogger のブログのアカウントを登録しようとすると、次のエラー メッセージが表示されます。

アカウントを登録することはできません。

お帰りなさい。（2014年4月30日 追記）

Bloggerの表示を最も簡単にiPhoneに最適化する方法

Blogger Touchを使ってスマートフォンに最適化

私自身もBloggerでブログを書いていますが、Bloggerを使ったブログをiPhoneで閲覧していると下記のようにiPhone用の表示に最適化されているサイトが見受けられます。

Blogger Touch オフィシャルブログ

これは、Blogger Touchというサービスを利用して、bloggertouch.appspot.com/xxx（xxxは指定）にリダイレクトさせることによってiPhone用の表示に最適化しています。

Blogger Touchのサービス設定

Blogger Touchのサイトで『Mobile Edition Maker』をクリックすると




Only Three stepsと記載されているように、僅か3ステップで設定することができるとあります。

BloggerのURLを入力

これは３ステップには含まれていないようです。まず自分のブログのURLを入力します。

Step1：リダイレクトさせるURLを決める

Step2：『Add Code』をタップ

Bloggerのページ要素を追加で『ウィジェットを追加』をタップし、ブロガーに組み込みます。

Step3：『Verification』で設定を確認

Bloggerの設定でスマートフォンに最適化

Blogger Touchは、Bloggerを簡単にiPhone用の表示に最適化する方法ではありますが、現時点で最も簡単にiPhoneに最適化するには、Bloggerの 設定>メールとモバイル>モバイルテンプレート（ベータ版）で『モバイルテンプレートを表示する』を『はい』にするだけで、Bloggerをスマートフォン（iPhone, android携帯）に最適化することができます。




実際にスマートフォンでアクセスされた場合にどのように表示されるかは、スマートフォンを保有していなくても『モバイルプレビュー』から確認することができます。下記は、このブログのトップページをiPhoneで表示したものです。




各記事はこんな風に表示されます。




本文中心だけの表示でサイドバーがなくなります。しかし、Blogger Tochでスマートフォンの表示に最適化するとAdSenceが表示されませんが、Bloggerの設定でスマートフォンの表示に最適化した場合には、AdSenceが表示されます。

今日の一曲

My Wayといえば、英国訛りで♪マ～イ、ワイ！とシャウトするセックス・ピストルズ（Sex Pistols）が有名です。このMy Wayが収録されているピストルズのアルバム『Kiss This』は一聴の価値ありですが、iPhoneでインターネットラジオのスォーノ・ドルチェ（Sono Dolce）を聴いていたら、流れてきたのがYen town bandことCharaのMy Wayでした。

iTunesで購入してからCharaのボーカルであることを知りました。彼女の独特の声で切なくMy Wayを歌い上げてくれています。

My Way - Yet Town Band

ブログとSNSを連携する - mixi イイネ！ボタン

mixi「イイネ！」ボタンがオープン化されたというニュースがあったので、当ブログにもmixi「イイネ！」ボタンを追加してみました。

下記は、2010年12月8日にmixiからプレスリリースされた内容です。

イイネ！ボタンは、ニュースサイト、通販サイト、グルメサイトなど様々なWebサイトにおいて、興味・関心を持ったトピックスや情報などを1クリックで簡単に友人に共有できる『mixi』の新しいコミュニケーション機能です。「イイネ！」したトピックスや情報は、そのページにmixiでつながっている友人が訪れた際に、自分の友人の誰が、また何人が「イイネ！」したかが一目で分かるようになるほか、友人のmixi TOPページのフィード及び自身の最新のチェックにも掲載されます。最新のチェックに表示された友人からのフィードに対して、さらにイイネ！やコメントなどのフィードバックができるため、これをきっかけに、友人との新たなコミュニケーションが生まれます。

『mixi』外のWebサイトにおいて、 1クリックで簡単に友人・知人にコンテンツを共有できる「イイネ！ボタン」を公開

mixiもクローズドの殻を破りオープン化の道を歩み出すのでしょうか。前日のMarkZine（マーケジン）に東京広告協会が首都圏の大学生を対象に行った「SNS（ソーシャル・ネットワーキング・サービス）に関する意識調査」の結果が掲載されていました。

最も利用者の多いSNSは「mixi」で96.6％と圧倒的な強さを見せている。続いて「モバゲー」（18.4％）、「GREE」（14.3％）などが続いている。SNSでの交流メンバーは「同じ大学の中のいい人」という回答は9割近くにおよび、「小中高などの地元の人」「同じサークル・部活の人」が続いている。

大学生の9割がmixiを利用、ツイッター利用は2割強

mixiが現在の若者に圧倒的な支持を得ていることを考えると、この世代がある日突然Facebookに移行するということは考えづらいです。余地があるとすると、上記の調査結果ではコミュニケーションそのものがリアルでの閉じた関係性と連携しているので、コミュニケーションのオープン化に必然性が見いだされたときなのでしょうか。学生から社会人といった変化も関係性のオープン化のきっかけになります。そういう意味でもmixiは近いうちにオープン化を選択しなければならなくなるのではないでしょうか。

mixi「イイネ！」ボタンの設置

「mixiチェックの設定方法」にも記載していますが、mixiチェックを利用するには、mixiデベロッパー登録が必要となります。登録方法はこちらを参照してください。登録確認が携帯からとなっているので、携帯のメアドが必要になります。iPhoneのメールアドレス（i.softbank.jp）でも利用可能です。

チェックキーまでの取得については、「mixiチェックの設定方法」の「新規サービス登録」を参照してください。

イイネ！ボタンのhtmlを発行

下図は、『mixiチェック』というサービスが追加されている状態です。


サービス名称をクリックし『イイネ！ボタンHTMLタグ発行』欄に必要項目を入力します。


① 対象URL
mixiイイネ！ボタンを設置するブログのURLを記載します。ここに記載するURLのドメインは、「mixiチェックの設定方法」の「新規サービス登録」にある許可ドメインに設定されていなければなりません。

②横幅
『プロフィール画像を表示』がチェックされていなければデフォルト値は140pixですが、70pixあれば十分だと思います。

③プロフィール画像を表示
チェックするとイイネ！をクリックしたユーザのプロフィール画像が表示されます。






『タグ取得』をクリックすると下部にhtmlコードが表示されます。このタグをブログに貼り付ければ下記のようにイイネ！ボタンが表示されます。

mixiチェックとmixiイイネ！ボタンの違い

「mixiチェック」は、「ブログとSNSを連携する - mixi連携」で記載したようにボタンをクリックするとコメントの記入が促されます。一方、mixiイイネ！ボタンはクリックするだけです。何れもmixiのチェックに表示されますが、mixiチェックは情報共有、mixiイイネ！ボタンは共感といった違いを感じます。これは、Facebookの「シェア」と「いいね！」と同関係です。

Bloggerにmixiイイネ！ボタンを追加する

下記のコードの発行されたチェックキーを取得したキーに置換して利用してください。data:post.urlでブログエントリーのURLを取得します。注意点としては、オプションの&service_key，&show_faces等の&を「&amp;」ようにエスケープしないとエラーとなってしまいます。

<iframe allowTransparency='true' expr:src='"http://plugins.mixi.jp//favorite.pl?href=" + data:post.url + "&service_key=発行されたチェックキー&show_faces=false"' frameborder='0' scrolling='no' style='overflow:hidden; border:0; width:70px; height:20px'/>

ブログ（本文）の前に表示する

1．Bloggerの『デザイン → HTMLの編集』 からウィジェットのテンプレートを展開をチェック。
2．テンプレートから<div class='post-header-line-1'>を検索
3．<div class='post-header-line-1'>の下にコードを貼付ける。

ブログ（本文）の後に表示する

1．Bloggerの『デザイン → HTMLの編集』 からウィジェットのテンプレートを展開をチェック。
2．テンプレートから<data:post.body/>を検索
3．<data:post.body/>の下にコードを貼付ける。

今日の一曲

クラムボンのヴォーカル&鍵盤担当の原田郁子のソロアルバム「銀河」に納められている1曲目でアルバム名にもなっているこの曲は、闘病生活直前の忌野清志郎が作曲し、コーラスとアコギで参加しています。クラムボンというバンドの曲も原田氏の曲も聴いたことはなかったのですが、清志郎が参加しているということで聴いてみました。清志郎の微妙にアンマッチな声の被せ方にゾクゾクとする緊張感があります。リピートして聴いていると次第にその緊張感が安堵感に変化し、心地よさを感じさせます。アルバムに収録されている原曲は、13'45"という長い曲ですが、iTunesにショートバージョンがあります。夜空を見上げながら聴いてみてください。

銀河 (short version) - Ikuko Harada

直帰率の改善（関連記事の表示）

Bloggerで関連記事（関連ブログ）を表示するで、直帰率改善のためにSmart Related Posts Widget for Google Blogger - v2.0を使って関連するブログ記事を掲載する方法を記しましたが、関連記事を表示するようになってから直帰率が改善がされているかを計測してみました。

結果から述べると、直帰率が85.75％から83.62％と2.1ポイント改善することができました。
下表がその結果となります。

直帰率の改善：（Google Analytics）

期間	直帰率			変化率
	訪問者全体	新規訪問者	再訪問者	訪問者全体	新規訪問者	再訪問者
設置前（前月）	85.75%	85.39%	86.85%
サイドバーに設置	85.13%	85.23%	84.94%	-0.72%	-0.19%	-2.20%
ボディー部に設置	83.62%	83.47%	84.19%	-1.77%	-2.07%	-0.88%

※ 前月･･･4週間、サイドバーに設置･･･2週間、ボディー部に設置･･･2週間

関連記事を記事の最後（ボディー部）に挿入することがうまくできなかったので、最初の2週間はサイドバーにだけ表示されていました。しかし、この結果、改善にあたっての仮説を補う面白いことに気が付くことができました。

直帰率改善の仮説

直帰率改善にあたっての仮説は、下記のデータから導き出したものです。

① 来訪者のうち新規訪問者（新規ユーザー）は75％
② 流入の80％は検索エンジンからである



【仮説】
検索エンジンを経て何かを調べるためにこのブログに初めて訪れた新規訪問者は、サイト構成もしらなければ、他にどんな内容が掲載されているかを知らない。そのため能動的に他の記事を検索する人は少ないはず。しかし関連する記事が他にもあるということが目に留まればもう１ページ閲覧する可能性がある。

結果の考察

上記の仮説に基づき関連記事を表示するように変更しました。サイドバーに関連記事を表示すると再訪問者の直帰率は下がりましたが、新規訪問者では大きな変化は見られませんでした。新規訪問者はボディー部へ関連記事を表示するようになってから大きく改善されました。これは新規訪問者では、本文を読む目の導線上になければ気が付かれないということだと思います。

トータルの変化率でみると再訪問者が3.1ポイント、新規訪問者が2.2ポイントと、変化が大きかったのは再訪問者でした。再訪問者の直帰率が大きく改善されるとはいうのは予想外でした。また再訪問者は記事の最後に関連記事を表示してからも直帰率が改善される結果となりました。

変化率とは

Google Analyticsでも期間比較を行うと変化率が表記されています。変化率とは前と比べてどのくらい変わったかという割合です。前年比120％というような言い方と同様です。

e.g.
Aくんは、毎月のお小遣いが800円だったのが1,000円になりました。またBくんは1,000円が1,250円になりました。どちらの方が前と比べて改善された（変化が大きい）のでしょうか。

Aくん 800円 → 1,000円 200円UP
Bくん 1,000円 → 1,250円 250円UP

上がった金額はBくんの方が大きいです。しかし比率でみると

1,000円÷ 800円×100=125％
1,250円÷1,000円×100=125％

で、共に値上げ前と比べて125％です。変化率はこの比率から100％をマイナスした値になります。つまり上記の変化率は25％で、以前より25％アップしたといえます。

では、デフレの影響でお小遣いが下がった場合には、

Aくん 1,000円 → 800円 200円Down
Bくん 1,250円 → 1,000円 250円Down

800円÷1,000円×100-100％=-20％
1,000円÷1,250円×100-100％=-20％

共に変化率は-20％ということになります。

Bloggerで関連記事を表示する

Bloggerで関連記事（関連ブログ）を表示するでボディ部に関連記事できないと記していましたが、related posts widget でオプション記載部をエスケープしていないと正しく認識されないということが分かり下記のように（赤字部分）変更することで解決しました。

<!-- related posts -->
  <h4>関連記事</h4>
  <div class='related-posts-widget'>
  &lt;!-- {
 related_title:''
 ,thumbs:0
  } --&gt;
  loading..
  </div>
<!-- related posts -->

このコードをテンプレートに埋め込みます。

ブログ（本文）の前に表示する

1．Bloggerの『デザイン → HTMLの編集』 からウィジェットのテンプレートを展開をチェック。
2．テンプレートから <div class='post-header-line-1'> を検索。
3．<div class='post-header-line-1'> の下にコードを張付ける。

ブログ（本文）の後に表示する

1．Bloggerの『デザイン → HTMLの編集』 からウィジェットのテンプレートを展開をチェック。
2．テンプレートから <data:post.body/> を検索。
3．<data:post.body/> の下にコードを張付ける。

今日の一曲

ビートルズの中で好きなアルバムは、と、問われれば迷わずこのREVOLVERをあげます。特にTomorrow Never Knowsは、ワンコードで作られ、テープループを用いたアバンギャルドな一曲となっています。まさにミニマムミュージックの原点がこの曲にあります。リンゴスターのドラムのリフの入り方もとっても格好良いですし、ボーカルの中域を持ち上げたラジオチックな録音の仕方もステキです。限られた機材で工夫を凝らしているこの曲は、昨今のDTMのアンチテーゼとして聴こえてきます。

The Beatles - Tomorrow Never Knows / Revolver